<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>
    <link href="//unpkg.com/layui@2.10.3/dist/css/layui.css" rel="stylesheet">
    <style>
        .content {
            width: 400px;
            height: 400px;
            position: absolute;
            top: 130px;
            left: 100px;
        }

        img {
            width: 100px;
            height: 100px;
        }

        button {
            margin-bottom: 5px;
        }

        .gw {
            position: absolute;
            top: 430px;
        }
    </style>
</head>

<body>

    <h1>点餐</h1>
    <button class="layui-btn layui-btn-primary layui-border-red" onclick="gg()">公告详情</button><br>
    <button type="button" class="layui-btn layui-bg-orange" onclick="gps()">位置</button><br>
    <!-- <button class="title"></button> -->
    <button type="button" class="layui-btn title">招牌烤鱼</button><br>
    <button type="button" class="layui-btn title">特色烧烤</button><br>
    <button type="button" class="layui-btn title">饮料</button>
    <div class="content">

    </div>
    <div class="gw">
        <h1>你的餐品</h1>
        <h3>总价: <span class="money">0</span></h3>
        <ul>

        </ul>
    </div>

    <script>

        var date = [{
            pid: 0,
            id: 1,
            name: '青花椒烤鱼',
            price: 79,
            img: 'https://ts1.tc.mm.bing.net/th/id/R-C.3f4bb4161eff5c2f9fa1fddbcb129aaf?rik=RgURe%2fIwxxznsQ&riu=http%3a%2f%2fbantianyaoky.18zsb.cn%2fimg%2fproduct%2fproduct_1563931314.jpg&ehk=a8iO1RSAilBnJuCpmQxKnY%2bL6oFnfUd%2fYET4wtarvNU%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1'
        },
        {
            pid: 0,
            id: 2,
            name: '麻辣烤鱼',
            price: 99,
            img: 'https://ts1.tc.mm.bing.net/th/id/R-C.265a3fd24f4718e47d98ef62bbee1a09?rik=l7fd6Lw9fDz6kw&riu=http%3a%2f%2fbantianyaoky.18zsb.cn%2fimg%2fbanner%2fbanner_03.jpg&ehk=BJ55xlT7SeyfOzu%2flwWTGuSx8yNOWAQKuawN4he7nr0%3d&risl=&pid=ImgRaw&r=0'
        },
        {
            pid: 1,
            id: 3,
            name: '羊肉串',
            price: 5,
            img: 'https://ts1.tc.mm.bing.net/th/id/R-C.5b5ff625c18bd8a7f38c637adbad69c5?rik=LGr20SshQb68Ew&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50099%2f7097.jpg_wh860.jpg&ehk=FYc0uKmqt96IrQWlQSDXTZ1Ka1BlkrP3QtnokEtCK7g%3d&risl=&pid=ImgRaw&r=0'
        },
        {
            pid: 1,
            id: 4,
            name: '烤鸡翅',
            price: 10,
            img: 'https://ts1.tc.mm.bing.net/th/id/R-C.cb8db93fec97700287b2ba8d104faf0b?rik=tJA%2fjrRpYGEhDA&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50061%2f9442.jpg_wh860.jpg&ehk=SoU2xU9Zl0EgwmjGeF0MKh2Gn6Rx74BZpcEr7oOTNLY%3d&risl=&pid=ImgRaw&r=0'
        },
        {
            pid: 2,
            id: 5,
            name: '啤酒',
            price: 5,
            img: 'https://ts1.tc.mm.bing.net/th/id/R-C.4a731a425e387ecbb76db49f40428ff9?rik=Pj4Dk744ZPkljw&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50063%2f0453.jpg_wh1200.jpg&ehk=rwiM4rdoVF%2bll74EB7Y9rBnHgvwicgp51ZrYqIhu2TA%3d&risl=&pid=ImgRaw&r=0'
        },
        {
            pid: 2,
            id: 6,
            name: '果汁',
            price: 3,
            img: 'https://pic.52112.com/180415/181415_128/MFgWfCAXzU_small.jpg'
        }]

        var titles = document.querySelectorAll('.title')
        var content = document.querySelector('.content')
        var ul = document.querySelector('ul')
        var money = document.querySelector('.money')

        date.forEach(i => {
            if (i.pid == 0) {
                content.innerHTML += `
                        <div class="dd" >
                             <img src="${i.img}">
                             <span>${i.name}</span>
                             <span>${i.price}元/份</span>
                             <button onclick="add(${i.id})">点餐</button>
                             <button onclick="xq(${i.id})">商品详情</button>   

                        </div>
                    `
            }
        })
        // tap切换栏
        titles.forEach((item, index) => {
            item.addEventListener('click', () => {
                content.innerHTML = ''
                date.forEach(i => {
                    if (i.pid == index) {
                        content.innerHTML += `
                        <div class="dd" >
                             <img src="${i.img}">
                             <span>${i.name}</span>
                             <span>${i.price}元/份</span>
                             <button onclick="add(${i.id})">点餐</button>
                             <button onclick="xq(${i.id})">商品详情</button>   
                        </div>
                    `
                    }
                })
            })
        })

        // 公告
        function gg() {
            alert('请适度点餐，光盘行动拒绝浪费，使用公勺公筷')
        }

        var arr = []


        // 添加
        function add(i) {
            var a = date.find(item => item.id == i)
            arr.push({
                id: arr.length,
                name: a.name,
                price: a.price,
                img: a.img,
                num: 1
            })
            apply()
        }
        function apply() {
            ul.innerHTML = ''
            arr.forEach(item => {
                ul.innerHTML += `
                <li>
    <img src="${item.img}">
    <span>${item.name}</span>
    <span>${item.price}/份</span>
    <button onclick="jian(${item.id})">-</button>
    <span>${item.num}</span>
    <button onclick="jia(${item.id})">+</button>
    <button onclick="del(${item.id})">移除餐品</button>
    

</li>
                
        `
            })
            zong()
        }
        apply()


        function jia(i) {
            var a = arr.findIndex(item => item.id == i)
            arr[a].num++
            apply()
            zong()
        }
        function jian(i) {
            var a = arr.findIndex(item => item.id == i)
            if (arr[a].num > 1) {
                arr[a].num--
            }
            apply()
            zong()
        }

        // 总价
        function zong() {
            var num = 0
            arr.forEach(item =>
                num += item.price * item.num
            )
            money.innerHTML = num
        } zong()

        // 移除餐品
        function del(i) {
            var index = arr.findIndex(item => item.id == i)
            arr.splice(index, 1)
            apply()
            zong()
        }

        // 详情
        function xq(id) {
            location.assign("./4.3.详情.html?id=" + id)
        }
        function gps() {
            location.assign("./4.3.定位.html")
        }

      
    </script>


</body>

</html>